<template>
  <a-spin :spinning="confirmLoading">
    <a-form-model ref="form" :model="models" :rules="validatorRules">
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="businessName" required label="商家名称">
        <a-input placeholder="请输入商家名称" v-model="models.businessName" />
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="packageName" required label="套餐名称">
        <a-input placeholder="请输入套餐名称" v-model="models.packageName" />
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="packagePrice" required label="套餐合作价格">
        <a-input placeholder="请输入套餐价格" v-model="models.packagePrice" />
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="packageFeature" required label="套餐卖点">
        <div class="editIconMore clearInput">
          <j-search-select-tag
            placeholder="请添加卖点"
            v-model="models.packageFeature"
            mode="multiple"
            v-if="models.packageFeature !== '' && models.packageFeature !== undefined && models.packageFeature.length !== 0"
          >
          </j-search-select-tag>
          <div class="addIcon" @click="addShop" v-if="addIconShow">+添加</div>
          <input type="text" class="shuInput" placeholder="请输入" v-model="shoppIngIcon" @change="search" v-else />
        </div>
        <!-- <a-input placeholder="请添加卖点" v-model="models.packageFeature"/> -->
      </a-form-model-item>
    </a-form-model>
  </a-spin>
</template>

<script>
export default {
  name: 'CommerceProducts',
  components: {
  },
  props: {
    model: {
      type: Object,
      default: {},
    },
  },

  data() {
    return {
      addIconShow: true,
      // searchOptions: [
      //   {
      //     text: '中高端',
      //     value: '中高端',
      //   },
      //   {
      //     text: '自动超频',
      //     value: '自动超频',
      //   },
      // ],
      shoppIngIcon: '',
      models: this.model,
      confirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      validatorRules: {
        businessName : [{ required: true, message: '请输入商家名称' }],
        packageName : [{ required: true, message: '请输入套餐名称' }],
        packagePrice : [{ required: true, message: '请输入套餐合作价格' }],
        packageFeature  : [{ required: true, message: '请输入套餐卖点' }],
      },
     
    }
  },

  created() { },
  computed: {},
  updated(){
    
  },
  mounted() {
    this.$nextTick(function(){
      console.log('11111111111111111',this.models)
    })

  },
  methods: {
    // 添加标签
    addShop() {
      this.addIconShow = false
    },
    search(event) {
      let str = event.target.value
      this.shoppIngIcon = ''
      if(this.models.packageFeature === undefined || this.models.packageFeature === ''){
        this.models.packageFeature = ''
        this.models.packageFeature = str
      }else{
        this.models.packageFeature +=  ',' + str
      }
      this.addIconShow = true
    },
    generatedBtnProp() {
      let obj = {
        businessName:this.models.businessName,
        packageName:this.models.packageName,
        packagePrice:this.models.packagePrice,
        packageFeature:this.models.packageFeature,
      }
      console.log("this.models",this.models)
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('appApiAsk', 1,obj)
        } else {
          this.$emit('appApiAsk', 2,obj)
        }
      })
    },

  },
}
</script>

<style lang="less">

</style>